<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头部导航栏</title>
    <link rel="stylesheet" href="bs4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        #navHeadPic {
            width: 40px;
            height: 40px;
            display: inline-block;
            background-image: url(images/headPic/head1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        #userDropdown {
            padding: 0;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <div class="row" style="margin: 0 auto">
                <!-- LOGO -->
                <a class="navbar-brand" href="index.html">
                    <img src="images/logo.png" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
                    aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse text-center" id="navbarContent">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="aim.html">目的地</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                旅游攻略
                            </a>
                            <div class="dropdown-menu text-center" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="view.html"><i class="fa fa-area-chart mr-2" aria-hidden="true"></i>景点攻略</a>
                                <a class="dropdown-item" href="deliousfood.html"><i class="fa fa-cutlery mr-2" aria-hidden="true"></i>美食攻略</a>
                                <a class="dropdown-item" href="line.html"><i class="fa fa-paper-plane-o mr-2" aria-hidden="true"></i>个性路线</a>
                            </div>
                        </li>
                        <li class="nav-item d-flex justify-content-center">
                            <form class="form-inline pull-right" role="search" action="/Search/SearchList" method="get"
                                target="_blank">
                                <input id="search" style="width: 120px" name="search" class="form-control mr-sm-2"
                                    type="search" placeholder="全站搜索" aria-label="搜索">
                                <button class="btn my-2 my-sm-0" type="submit"
                                    style="background:none; margin-left:-3rem; color:#ff9d00;"><i class="fa fa-search"
                                        aria-hidden="true"></i></button>
                            </form>
                        </li>
                        <li class="nav-item dropdown" id="message">
                            <a class="nav-link dropdown-toggle" href="userCenter.html" id="navbarDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-bell-o mr-2" aria-hidden="true"></i>消息中心
                            </a>
                            <div class="dropdown-menu text-center" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#"><i class="fa fa-envelope-o mr-2"
                                        aria-hidden="true"></i>系统通知</a>
                                <a class="dropdown-item" href="#"><i class="fa fa-at mr-2"
                                        aria-hidden="true"></i>关注通知</a>
                                <a class="dropdown-item" href="#"><i class="fa fa-commenting-o mr-2"
                                        aria-hidden="true"></i>回复消息</a>
                            </div>
                        </li>

                        <div class="dropdown-divider"></div>
                        <li class="nav-item" id="login">
                            <a class="nav-link" href="login.html">登录</a>
                        </li>
                        <li class="nav-item" id="register">
                            <a class="nav-link" href="regist.html">注册</a>
                        </li>
                        <li class="nav-item dropdown ml-2">
                            <a class="nav-link dropdown-toggle d-flex align-items-center justify-content-center"
                                href="userCenter.html" id="userDropdown" role="button" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                个人中心
                            </a>
                            <div class="dropdown-menu text-center" aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="userCenter.html"><i class="fa fa-user-o mr-2"
                                        aria-hidden="true"></i>个人中心</a>
                                <a class="dropdown-item" href="editor.html"><i class="fa fa-pencil-square-o mr-2"
                                        aria-hidden="true"></i>撰写攻略</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="index.html"><i class="fa fa-sign-out mr-2"
                                        aria-hidden="true"></i>退出登录</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <script src="javascripts/jquery-3.4.1.min.js"></script>
    <script src="bs4.0/js/bootstrap.min.js"></script>
    <script src="bs4.0/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function () {
            $('.dropdown-toggle').dropdown();
            $('.navbar ul li:last-child').hide()
            $('#message').hide()
            if (localStorage.getItem('user')) {
                var username = localStorage.getItem('user')
                $('#login').hide()
                $('#register').hide()
                $('.navbar ul li:last-child>a').html('<i class="rounded-circle" id="navHeadPic"></i>')
                $('.navbar ul li:last-child').show()
                $('#message').show()
            }
            $('.navbar ul li a:last-child').click(function () {
                var user = localStorage.getItem('user')
                if (user != '') {
                    localStorage.setItem('user', '')
                }
            })

            $('#search').click(function () {
                $('#search').animate({ 'width': '250px' }, 1000)
            })
            $('#search').blur(function () {
                $('#search').animate({ 'width': '120px' }, 1000)
            })

            console.log(window.location.pathname)
            if (window.location.pathname != '/public/index.html') {
                $('.navbar').css('background-color', '#f00!import')
            }
        })
    </script>
</body>

</html>